@use "src/styles/variables" as *;

.vm-relabeling {
  display: grid;
  gap: $padding-medium;

  &-header {
    display: grid;
    gap: $padding-global;
    align-items: flex-start;
    width: 100%;

    &-configs {
      textarea {
        min-height: 200px;
      }
    }

    &__labels {
      textarea {
        min-height: 60px;
      }
    }

    textarea {
      font-family: $font-family-monospace;
      overflow: auto;
      width: 100%;
      height: 100%;
    }

    &-bottom {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: $padding-global;

      a {
        color: $color-text-secondary;
      }
    }
  }

  &-steps {
    display: grid;
    gap: $padding-global;

    &-item {
      display: grid;
      gap: $padding-global;
      padding: 0 $padding-global $padding-global;
      border-bottom: $border-divider;

      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }

      &__row {
        display: grid;
        grid-template-columns: 100px 1fr;

        @media (max-width: 500px) {
          grid-template-columns: 1fr;
          gap: 4px;

        }

        pre {
          white-space: pre-wrap;
        }
      }
    }
  }
}
